<template>
  <div>
  <div class="first_characters">
    总共 {{ pagination.total }} 条&nbsp;&nbsp;
    <!--第{{
      pagination.currentPage! * pagination.pageSize! - (pagination.pageSize! - 1)
    }}~{{
    pagination.currentPage! * pagination.pageSize! < pagination.total! ? pagination.currentPage! * pagination.pageSize! : pagination.total
    }}条-->
    <!-- 7-17修改 -->
    第 {{ pagination.currentPage }} / {{ pagination.pageCount }} 页
  </div>
  <el-pagination
    :current-page="pagination.currentPage"
    :page-size="pagination.pageSize"
    :total="pagination.total"
    :pager-count="pagination.pagerCount || 7"
    :page-sizes="[10, 20, 50, 100]"
    small
    class="pagination-pager"
    layout="slot, prev, pager, next, sizes, jumper"
    @current-change="currentChange"
    @size-change="sizeChange"
  >
    <div></div>
  </el-pagination>
  </div>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue'
export interface PaginationAttrs {
  currentPage?: number;
  pageSize?: number;
  total?: number;
  pagerCount?: 5 | 7 | 9 | 11 | 13 | 15 | 17 | 19 | 21;
}

const emits = defineEmits(['current-change', 'size-change'])
defineProps<{ pagination: PaginationAttrs; small?: boolean; }>()

const currentChange = (value: number) => {
  emits('current-change', value)
}
const sizeChange = (value: number) => {
  emits('size-change', value)
}

onMounted(() => {
  document.getElementsByClassName('el-pagination__jump')[0].childNodes[0].textContent = '跳至'
})

</script>

<style lang="less">
.first_characters { // 7-17 单独为每页总数设置位置
  float: left;
  font-size: 14px;
  width: 200px;
  // margin-right: 12px;
}
.pagination-pager {
  margin-top: 20px;
  justify-content: flex-end;
  /deep/.el-pager li {
    font-size: 14px;
  }
  /deep/.el-pager li.is-active {
    background: #E0F2FF;
  }
  /deep/.el-pager li.is-active:hover {
    background: #E0F2FF;
  }
  /deep/.el-pager li:hover {
    background: #F3F3F6;
  }
  /deep/.el-pagination__editor.el-input {
    width: 48px;
    height: 32px;
  }
  /deep/.el-select .el-input {
    height: 32px;
    width: 98px;
  }
}


</style>
